﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <script type="text/javascript" src="../internal.js"></script>
    <link rel="stylesheet" type="text/css" href="video.css" />
    <style type="text/css">
        /*
			PLAYER
		*/

        .audioplayer {
            height: 2.5em; /* 40 */
            color: #8c8c8c;
            position: relative;
            z-index: 1;
        }

            /* player elements: play/pause and volume buttons, played/duration timers, progress bar of loaded/played */

            .audioplayer > div {
                position: absolute;
            }

        .audioplayer-title {
            margin-left: 3em;
            width: 85%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis; 
        }

        /* play/pause button */

        .audioplayer-playpause {
            width: 2.5em; /* 40 */
            height: 100%;
            text-align: left;
            text-indent: -9999px;
            cursor: pointer;
            z-index: 2;
            top: 0;
            left: 0;
        }

            .audioplayer-playpause a {
                display: block;
            }

        .audioplayer-stopped .audioplayer-playpause a {
            width: 18px;
            height: 25px;
            content: '';
            position: absolute;
            top: 30%;
            left: 50%;
            margin: -0.5em 0 0 -0.25em; /* 8 4 */
            background: url(images/icon_audio_unread26f1f1.png) no-repeat;
            background-size: 100%;
        }

        .audioplayer-playing .audioplayer-playpause a {
            width: 18px;
            height: 25px;
            content: '';
            position: absolute;
            top: 30%;
            left: 50%;
            margin: -0.5em 0 0 -0.25em; /* 8 4 */
            background: url(images/icon_audio_unread26f1f1.png) no-repeat;
            background-size: 100%;
            -webkit-animation: audio_playing 1s infinite;
        }

        @-webkit-keyframes audio_playing {
            30% {
                background-image: url(images/icon_audio_reading_126f1f1.png);
            }

            31% {
                background-image: url(images/icon_audio_reading_226f1f1.png);
            }

            61% {
                background-image: url(images/icon_audio_reading_226f1f1.png);
            }

            62% {
                background-image: url(images/icon_audio_reading_326f1f1.png);
            }

            100% {
                background-image: url(images/icon_audio_reading_326f1f1.png);
            }
        }


        /* timers */

        .audioplayer-time {
            width: 4.375em; /* 70 */
            height: 100%;
            line-height: 2.375em; /* 38 */
            text-align: center;
            z-index: 2;
            top: 0;
        }

        .audioplayer-time-current {
            left: 1em; /* 40 */
        }

        .audioplayer-time-duration {
            border-right: 1px solid #555;
            border-right-color: rgba( 255, 255, 255, .1 );
            right: 0.5em; /* 40 */
            margin-top: 1em;
        }

        /* progress bar of loaded/played */

        .audioplayer-bar {
            height: 0.2em; /* 14 */
            background-color: #222;
            cursor: pointer;
            z-index: 1;
            top: 50%;
            right: 5em; /* 110 */
            left: 3em; /* 110 */
            margin-top: 1em; /* 7 */
        }

            .audioplayer-bar div {
                width: 0;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
            }

        .audioplayer-bar-loaded {
            background-color: #333;
            z-index: 1;
        }

        .audioplayer-bar-played {
            background: #007fd1;
            z-index: 2;
        }
    </style>
</head>
<body>
    <br />
    <br />
    <br />
    <h2>测试语音播放</h2>
    <br />
    <br />
    <div class="playAutdio" style="border: 1px solid #ebebeb; background-color: #fcfcfc; overflow: hidden; padding: 12px 0;">
        <div style="display: block;">
            <audio src="http://edoctorcorp.med9200.com/upload/media/talk.mp3" preload="auto"></audio>
        </div>
    </div>

    <div class="playAutdio" style="border: 1px solid #ebebeb; background-color: #fcfcfc; overflow: hidden; padding: 12px 0;">
        <div style="display: block;">
            <div class="audioplayer audioplayer-stopped">
                <audio src="http://edoctorcorp.med9200.com/upload/media/talk.mp3" preload="auto" style="display: none;"></audio>
                <div class="audioplayer-playpause" title="Play"><a href="#">Play</a></div>
                <div style="display: none;" class="audioplayer-time audioplayer-time-current">00:00</div>
                <div class="audioplayer-time audioplayer-time-duration">04:03</div>
                <div style="display: none;" class="audioplayer-volume">
                    <div class="audioplayer-volume-button" title="Volume"><a href="#">Volume</a></div>
                    <div class="audioplayer-volume-adjust">
                        <div>
                            <div style="height: 100%;"></div>
                        </div>
                    </div>
                </div>
                <div class="audioplayer-title">郭静 聊天 郭静 聊天 郭静 聊天 郭静 聊天郭静 聊天 郭静</div>
                <div class="audioplayer-bar">
                    <div class="audioplayer-bar-loaded" style="width: 1.6632%;"></div>
                    <div class="audioplayer-bar-played"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- jquery -->
    <script type="text/javascript" src="jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="audioplayer.js"></script>
    <script type="text/javascript">
        $(function () {
            $('.playAutdio').find('audio').audioPlayer({
                classPrefix: 'audioplayer',
                strPlay: 'Play',
                strPause: 'Pause',
                title: '郭静 聊天 郭静 聊天 郭静 聊天 郭静 聊天郭静 聊天 郭静'
            });

            $('.playAutdio').bind('click', function () {
                if ($('.audioplayer-playing').length > 0) {
                    $('.audioplayer-playpause a').trigger('click');
                } else if ($('.audioplayer-stopped').length > 0) {
                    $('.audioplayer-playpause a').trigger('click');
                } else {
                    //当前浏览器不支持播放音乐或语音，请在微信或其他浏览器中播放
                }
            });
        })
    </script>
</body>
</html>
